<template>
    <div>
      <listPage
        ref="listPageRef"
        pageTitle="主机ACL"
        :btnList="btnList"
        :tableData="tableData"
        :allColumn="tableColumn"
        :tableColumn="showColumn"
        @setColumn="(val)=>{showColumn=val}"
      ></listPage>
      <acl-add ref="aclAddDialog"/>
      <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
        <div class="btn-msg">
          请确认是否进行{{tipName}}？
        </div>
      </pdlog>
    </div>
  </template>
  <script>
  import {getHostsafeHostFirewall} from '@/api/pageList'
  import listPage from '@/components/listPage'
  import aclAdd from "./aclAdd.vue"
  export default {
    name: "主机ACL",
    components:{
      listPage,
      aclAdd
    },
    created() {
      this.init()
    },
    data(){
      return {
        tipName:'',
        showTip:false,
        btnList:[
          {
            id:1,
            name:'添加规则',
            handle:()=>this.handleAddClick('添加规则')
          },
          {
            id:2,
            name:'删除',
            handle:()=>this.handleDelClick('删除')
          },
        ],
        tableData:[],
        showColumn: [],
        tableColumn: [
          {
            field: "priority",
            label: "优先级",
          },
          {
            field: "strategy",
            label: "策略",
            format:(val)=>{
              return {
                'Y':'允许',
                'N':'拒绝',
              }[val]
            }
          },
          {
            field: "type",
            label: "类型",
            sortable: true,
            format:(val)=>{
              return {
                1:'IPv4',
                2:'IPv6',
              }[val]
            },
          },
          {
            field: "agreement",
            label: "协议",
            sortable: true,
            format:(val)=>{
              return {
                1:'TCP',
                2:'UDP',
                3:'ICMP',
              }[val]
            },
          },
          {
            field: "sourceAddress",
            label: "源地址",
            sortable: true,
          },
          {
            field: "sourcePort",
            label: "源端口",
            sortable: true,
          },
          {
            field: "targetAddress",
            label: "目的地址",
            sortable: true,
          },
          {
            field: "targetPort",
            label: "目的端口",
            sortable: true,
          },
          {
            field: "desc",
            label: "描述",
            sortable: true,
          },
          {
            field: "lastUpdatedTime",
            label: "修改时间",
            sortable: true,
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            btnlist: [
              {
                name: '修改',
                handle: ()=>{this.$refs.aclAddDialog.dialogVisible = true}
              },
            ]
          },
        ]
      }
    },
    methods:{
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        console.log('~~~~~~~~~',params)
  
        this.$nextTick(()=>{
          this.tableData = [
            {'priority':1,'strategy':'允许','type':'IPv4','agreement':'全部','sourceAddress':'0.0.0.0/0','sourcePort':'全部','targetAddress':'192.168.52.0/24','targetPort':'全部','desc':'132GiB','lastUpdatedTime':'2024-01-19'},
            {'priority':1,'strategy':'允许','type':'IPv6','agreement':'TCP','sourceAddress':'0.0.0.0/0','sourcePort':'全部','targetAddress':'192.168.52.0/24','targetPort':'全部','desc':'132GiB','lastUpdatedTime':'2024-01-19'},
            {'priority':1,'strategy':'允许','type':'IPv4','agreement':'UDP','sourceAddress':'0.0.0.0/0','sourcePort':'全部','targetAddress':'192.168.52.0/24','targetPort':'全部','desc':'132GiB','lastUpdatedTime':'2024-01-19'},
          ];
        })
  
        // 请求
        /*getHostsafeHostFirewall().then(res => {
          if(res.code==200){
            let data = JSON.parse(res.data)
            this.tableData = data
            console.log('~~~~~~',this.tableData);
          }
        })*/
      },
      handleAddClick(){
        this.$refs.aclAddDialog.dialogVisible = true
      },
      handleDelClick(name){
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
    }
  }
  </script>
  <style scoped lang="less">
  
  </style>
  